

<template>
<!-- 表单中插入上传组件，上传组件和多个其他常规表单项齐平 -->
  <div class="pic-wrapper">
    <div class="pic">
      <a-upload
        v-model:file-list="fileList"
        name="file"
        :headers="headers"
        @change="handleChange"
        class="upload-btn"
        :showUploadList="false"
        :customRequest="customRequest"
      >
        <div class="up-view"></div>
      </a-upload>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  value: { type: Array, default: () => [] },
})

const emit = defineEmits(['update:value'])
const fileList = ref([])

watch(
  () => props.value,
  (newVal) => {
    console.log('🚀------ ~ index.vue:29 ~ newVal:', newVal)
    fileList.value = newVal
  },
  { immediate: true }
)

const headers = ref()
const customRequest = (options) => {
  console.log('🚀------ ~ index.vue:23 ~ customRequest ~ options:', options)
  // emit('update:value', options.fileList)
}
const handleChange = (e) => {
  console.log('🚀------ ~ index.vue:26 ~ handleChange ~ handleChange:', e)
}
</script>

<style lang="scss" scoped>
.pic-wrapper {
  float: right;
  width: 50%;
  padding-left: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  .pic {
    height: 100%;
    border: 1px solid #1197f3;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0 7px 1px rgba(33, 152, 235, 0.3) inset;
    position: relative;
    border-radius: 5px;
    // input {
    //   width: 100%;
    //   height: 100%;
    //   opacity: 0;
    // }
  }
  :deep(.ant-upload-wrapper).upload-btn {
    width: 100%;
    height: 100%;
    // opacity: 0;
    .ant-upload {
      width: 100%;
      height: 100%;
      .up-view {
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }
  }
}
</style>
